5  Developer Portfolios

TipLecture Week 5

This week has no lecture slides. We discuss the flow of creating a website with Git, Quarto and GitHub pages.

What follows is an exercise that will help you set up your own website. Some of the steps can be confusing and/or complicated. When in doubt, you can consult my website, which is served by this repository.

5.1 Exercise

Do the following:

  1. Create a new repository on GitHub called yourname.github.io, where yourname is your GitHub username.

    • Select the option “Add README”
    • Select the option “Add license”. I suggest you choose “GNU General Public License v3.0”.

  2. Build a website using Quarto and GitHub pages that showcases your work. You may include, e.g.,

    • who you are
    • what you do (e.g. expertise, service, product)
    • where people may find you (GitHub, company page, social media platforms, etc.)
    • accomplishments/publications/qualifications/skills etc.
    • detailed curriculum vitae

Note that this page will be public, so think carefully before adding any personal information at all.

  1. Add a link to your website to the README.md file of your repository.
  2. Make your website into a GitHub template
  3. Hand in the link to your hosted personal website as well as a link to your template on GitHub - they are deliverables for this course. Also add a zip of the repo at the time of handing in - on your GitHub repo click the green Code button and choose Download ZIP.
WarningAlternative

If you already know how to build a webpage with any other means, you can also use that. The goal is to have a webpage as a developer portfolio that showcases you and your work. Still, you need to hand in the link to a working web-page, a template on GitHub and an archive (on GitHub click the green code button and Download ZIP) of your site at the time of handing it in.

5.1.1 Custom domain

If you want to use a custom domain name, you need to buy one. You can do this on many websites. To use a custom domain with Github pages, you need to add a CNAME file to your repository. You can read more about this here. After addition of the CNAME, your website will be available at the custom domain. For example, where Gerko Vink’s website is available at https://gerkovink.github.io, he can also access it at https://www.gerkovink.com. Any repository converted to a GitHub pages website (such as this course webpage) will then not only be available at https://username.github.io/repositoryname, but also at and https://www.customdomain.com/repositoryname.

5.1.2 Render on push to main

If you’d like your site to render when you push changes to the main branch, you must

  1. create a file called .github/workflows/quarto-publish.yml
  2. add these contents to the file
  3. go to Settings, then select Pages on the left-hand side, and under “Build and deployment” select “GitHub Actions”

GitHub will automatically deploy webpages with an action.

5.2 Further reading

All details to set this up smoothly can be found in the Quarto GitHub pages documentation. More information about building websites with Quarto can be found in the Quarto websites documentation.

5.3 Safe and compliant cloud storage

If you need some secure (GDPR or HIPAA compliant) file sharing, open up a free 5GB account on Sync.com. If you use this link you’ll get a free additional 1GB - so 6GB of super-secure storage. Don’t lose your 2FA recovery keys, though!

5.4 Nothing to show for?

Have a look at Advent of Code. It is a yearly event where you can solve programming puzzles. You can use any language you like. It is a great way to learn a new language or to practice your skills. Plus you can use your solutions as a portfolio.